<template>
  <div>
    <el-tree :data="data" :props="defaultProps" @node-click="handleNodeClick"></el-tree>
  </div>
</template>

<script>
export default {
  name: "promise-01",
  data() {
    return {
      data: [{
        label: '定时器回调'
      },
        {
          label: 'ajax回调'
        },
        {
          label: 'Promise 成功或失败的回调'
        },
        {
          label: '回调地狱'
        },],
      defaultProps: {
        children: 'children',
        label: 'label'
      }
    }
  },
  created() {
    /* 注意：then 方法会返回一个新的 Promise 实例对象。 */
    const promise = new Promise((resolve, reject) => {
      setTimeout(() => {
        //resolve(100);
        console.log("1")
      }, 1000);
    });

    let p = promise.then(value => {
      console.log("成功", value);
    }, reason => {
      console.log("失败", reason);
    });

    console.log(p);
    console.log("promise === p", promise === p); // false
    console.log("p instanceof Promise", p instanceof Promise); // true
  },
  methods: {
    async demo(p) {
      // 相当于 p.then(value=>{  console.log(result) })
      const result = await p;
      console.log(result);
    },

    divide(num1, num2) {
      if (num2 === 0) {
        // 抛出自定义异常
        throw new Error('被除数不能为 0 ');
      }
      return num1 / num2;
    },

    test() {
      let arr = [1, 3, 5, 7, 9];
      arr.forEach(value => {
        // 同步回调函数
        console.log(value);
      });
      console.log('主线程的代码');
    },
    test2() {
      setTimeout(() => {
        // 异步回调函数
        console.log('定时器执行了');
      }, 0);
      console.log('主线程的代码');
    },
    Person(name, age) {
      this.name = name;
      this.age = age;
    },

    /**
     * promise基本用法
     */
    promise() {
      let promise = new Promise((resolve, reject) => {
        setTimeout(() => {
          resolve(1);
        }, 1000);
      });
      promise.then(res => {
        // then 方法用来处理成功的回调
        console.log(res)
      }).catch(err => {
        // catch 方法用来处理失败的回调
        console.log(err)
      })
    },

    /**
     * Promise类方法
     */
    promise02() {
      let promise2 = Promise.resolve(1);
      promise2.then(res => {
        console.log('then', res) // then 1
      }).catch(err => {
        console.log('catch', err)
      }).finally(() => {
          console.log("finally")
        }
      )
    },

    promise03() {
      const promise = new Promise((resolve, reject) => {
        // 启动异步任务
        setTimeout(() => {
          let flag = false;
          let data = '用户数据';
          if (flag) {
            // 异步任务成功，就调用 resolve(value)
            resolve(data);
          } else {
            // 异步任务失败，就调用 reject(reason)
            reject(data);
          }
        }, 1000);
      });

      promise.then(value => {
        // 成功的回调--异步
        console.log('成功的回调1', value);
      }, reason => {
        // 失败的回调--异步
        console.error('失败的回调1', reason);
      });

      promise.then(value => {
        // 成功的回调--异步
        console.log('成功的回调2', value);
      }, reason => {
        // 失败的回调--异步
        console.error('失败的回调2', reason);
      });
    },

    handleNodeClick(data) {
      console.log(JSON.stringify(data));
      let timeout = setTimeout(function () {
        console.log(new Date())
      }, 2000);
      //clearTimeout(timeout);
    }
  }
}
</script>

<style scoped>

</style>
